<template>
  <el-dialog
      class="goods-list-dialog"
      title="选择商品"
      :visible.sync="computedVisible"
      width="1500px"
  >
    <div class="tips-lines">
      <div>填写数量则表示为本单要发货的商品</div>
      <div>
        <span>新商品订单请先上传小包商品后再进行操作</span>
        <el-button type="text" @click="$router.push('/stock/createPacketGoods')">点击上传小包商品</el-button>
      </div>
    </div>
    <div class="line">
      <div class="left">
        <div class="select-tips">
          当前所选SKU种数：<span>{{ changeGoodsData.length }}</span>   商品数量：<span>{{ changeGoodsData.reduce((c,v) => c + v.num, 0)}}</span>
        </div>
      </div>
      <div class="right">
        <div style="display: inline-block;" class="mgr20">
          <el-select v-model="queryParams.platformType" size="small" style="margin-left: 0" @change="getGoodsList()" >
            <el-option :label="$t('shipment.allPlatforms')" value=""></el-option>
            <el-option :label="getMercadoName()" :value="1" v-if="$store.getters.accountMKD"></el-option>
            <el-option :label="getFalabellaName()" :value="2" v-if="$store.getters.accountFalabella"></el-option>
            <el-option :label="getShopeeName()" :value="3" v-if="$store.getters.accountShopee"></el-option>
            <el-option :label="getSheinName()" :value="4" v-if="$store.getters.accountShein"></el-option>
            <el-option :label="getAmazonName()" :value="5" v-if="$store.getters.accountAmazon"></el-option>
            <el-option :label="getTikTokName()" :value="6" v-if="$store.getters.accountTikTok"></el-option>
            <el-option :label="$t('shipment.packetStock')" :value="7"></el-option>
            <el-option :label="getAliexpressName()" :value="8" v-if="$store.getters.accountAliexpress"></el-option>
          </el-select>
        </div>
        <search-input
            style="display: inline-block;"
            :value.sync="queryParams.search"
            @search="getGoodsList()"
            size="small"
            placeholder="搜索 SKU"
        ></search-input>
      </div>
    </div>
    <div class="goods-list">
      <el-table
          :data="goodsListData"
          style="width: 100%"
          border
          align="center"
          v-loading="tableLoading"
      >
        <el-table-column
          prop="image"
          :label="$t('table.productCover')"
          align="center"
          width="110"
          fixed="left"
        >
          <template slot-scope="{row}">
            <div class="img-box img-one">
              <img :src="row.image" alt="">
            </div>
          </template>
        </el-table-column>

        <el-table-column
            prop="goodsTitle"
            label="标题"
            min-width="150"
        >
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
              <div class="hidden-2">
                {{row.title}}
              </div>
            </el-tooltip>
            <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
            </div>
            <!--<div>{{ row.goodsList[0].title }}</div>-->
          </template>
        </el-table-column>

        <el-table-column
            prop="sku"
            label="Listing ID 与 SKU"
        >
          <template slot-scope="{row}">
            <div
              v-for="item in row.goodsList"
              :key="item.id"
            >
              <template v-if="item.isTB">
                {{$t('shipment.Not labeled')}}
              </template>
              <template v-else-if="item.isSystemLabel">
                {{$t('shipment.System label')}} ({{item.sku}})
              </template>
              <template v-else>
                {{item.goodsId}} {{item.sku ? `(${item.sku})` : ''}}
              </template>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="sku"
          label="MLCode"
        >
          <template slot-scope="{row}">
            <template v-if="row.isPacket">
              -
            </template>
            <template v-else>
              <div
                v-for="item in row.goodsList"
                :key="item.id"
              >
                {{item.inventoryId || '-'}}
              </div>
            </template>
          </template>
        </el-table-column>

        <el-table-column
            prop="goodsTitle"
            label="包装服务"
        >
          <template slot-scope="{row}">
            <div>{{ getPackageMaterialText(row.packageMaterialId) }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="stockNum"
            label="代发库存"
        >
        </el-table-column>
        <el-table-column
            prop="num"
            label="数量"
        >
          <template slot-scope="{row}">
            <el-input-number :value="computedNum(row)" @change="handleNumChange($event, row)" :min="0" :max="row.stockNum"></el-input-number>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="page-wrap">
      <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getGoodsList()"
      >
      </el-pagination>
    </div>
    <div class="buttons">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import SearchInput from '@/components/SearchInput/index.vue';
import {stockList} from "@/api/stock";
import {deepClone} from "@/utils";
import {
  getFalabellaName,
  getMercadoName,
  getAmazonName,
  getShopeeName,
  getSheinName,
  getTikTokName,
  getAliexpressName,
} from "@/utils";
export default {
  components: {
    SearchInput,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    goodsData: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  computed: {
    computedVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
  },
  data() {
    return {
      changeGoodsData: [],
      tableLoading: false,
      queryParams: {
        search: '',
        page: 1,
        pageSize: 20,
        platformType: '',
      },
      goodsListData: [],
      total: 0,
      packageMaterial: [],
      num: 0,
    }
  },
  watch: {
    computedVisible(val) {
      if (val) {
        this.changeGoodsData = deepClone(this.goodsData);
        this.getGoodsList();
      }
    },
    goodsData(val) {
      this.changeGoodsData = deepClone(this.goodsData);
    },
  },
  created() {
    this.changeGoodsData = deepClone(this.goodsData);
    this.getGoodsList();
  },
  methods: {
    getMercadoName,
    getFalabellaName,
    getShopeeName,
    getSheinName,
    getAmazonName,
    getTikTokName,
    getAliexpressName,
    cancel() {
      this.computedVisible = false;
    },
    submit() {
      this.computedVisible = false;
      this.$emit('change', this.changeGoodsData);
    },
    getGoodsList() {
      const params = {
        tabType: 1,
        'accountIds[]': -1,
        page: this.queryParams.page,
        pageSize: this.queryParams.pageSize,
        keyword: this.queryParams.search,
        platformType: this.queryParams.platformType,
        isNumNotNull: true
      };
      this.tableLoading = true;
      // 直接使用库存接口
      stockList(params)
          .then(res => {
            this.tableLoading = false;
            this.goodsListData = res.data;
            this.total = res.info.total;
            this.packageMaterial = res.info.packageMaterial
          })
          .catch(() => {
            this.tableLoading = false;
          })
    },
    getPackageMaterialText(id) {
      let text = this.$t('table.No packaging service');
      this.packageMaterial.forEach(item => {
        if (item.id === id) {
          text = item.name + '(' + item.price + this.$t('table.unit1') + ')'
        }
      });
      return text;
    },
    handleNumChange(num, row) {
      console.log('num ', num, row);
      const item = this.changeGoodsData.find(v => v.sku === row.sku);
      if (num <= 0) {
        this.changeGoodsData = this.changeGoodsData.filter(v => v.sku !== row.sku);
      } else {
        if (item) {
          item.num = num;
        } else {
          this.changeGoodsData.push({
            goodsId: row.goodsId,
            num,
            sku: row.sku,
            goodsTitle: row.title,
            goodsImage: row.image,
            packageMaterialId: row.packageMaterialId,
            width: row.width,
            height: row.height,
            length: row.length,
            weight: row.weight,
          });
        }
      }

    },
    computedNum(row) {
      const item = this.changeGoodsData.find(v => v.sku === row.sku);
      return item ? item.num : 0;
    },
  }
}
</script>

<style scoped lang="less">
.tips-lines{
  color: #F69A25;
  line-height: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.line{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.select-tips{
  span{
    color: red;
  }
}
.goods-list{
  margin-bottom: 20px;
}
.page-wrap{
  margin-bottom: 20px;
}
.buttons{
  text-align: right;
}
</style>
